<template>
  <div class="child">
    <h2>child(子)</h2>
    <!-- {{ title }} -->
    {{props.title2}}
    <button @click="$emit('enlarge-text')">修改父组件样式</button>
    <button @click="changeStyle">修改父组件样式2</button>
  </div>
</template>

<script setup>
import { defineExpose, defineProps, defineEmits } from 'vue';
// defineProps(['title'])
// const props = defineProps(['title2'])
const props = defineProps({
  title2: String
})
console.log(props)

const emit = defineEmits(['enlarge-text'])
const changeStyle = () => {
  emit('enlarge-text')
}

const hello = (str) => {
  console.log(str)
}

defineExpose({
  hello,
  aaa: '子组件传给父组件信息'
})
</script>

<style scoped>
.child{
  background: skyblue;
  padding: 10px;
}
</style>
